<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
  <title>图片</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
</head>

<body>
  <canvas id="canvas" width="1000" height="1000"></canvas>
</body>
<script>
  // 找到画布
  let canvas = document.querySelector("#canvas");
  // 获取画笔
  let ctx = canvas.getContext("2d");
  let img = new Image();
  img.src = "./img/R-C.gif";
  // drawImage('图片信息',x轴偏移量,Y轴偏移量) 1
  // drawImage('图片信息',x轴偏移量,Y轴偏移量,宽度,高度) 2
  // drawImage('图片信息',图像裁剪位置x,图像裁剪位置y,裁剪的宽度,裁剪的高度,x轴偏移量,Y轴偏移量,宽度,高度) 3
  img.onload = function () {

    ctx.drawImage(img, 50, 50)
    let img2 = new Image();
    img2.src = "./img/OIP-C.jpg";
    img2.onload = function () {
      // ctx.drawImage(img2, 50, 300);1
      // ctx.drawImage(img2, 50, 300, 350, 400);2
      ctx.drawImage(img2, 70, 80, 300, 300, 50, 300, 500, 400); //3
    };
  };
</script>

</html>